@import "themes/default/variables";

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/@ladjs/bootstrap-social/bootstrap-social.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "themes/default/default";

// Scaffolding
// -------------------------

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-top: 80px;
  margin-bottom: 75px;
  font-size: 14px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
  line-height: 45px;

  p, ul {
    margin-bottom: 0;
  }
}

// Input Fields
// -------------------------

textarea {
  resize: vertical;
}

// Navbar
// -------------------------

.navbar-nav img {
  width: 30px;
  min-height: 30px;
  margin: -15px 15px -15px;
}

.navbar{
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 20px;
  display: block;
}

.navbar-brand{
  font-size: 18px;
  float: left;
}

.navbar-toggler {
  position: relative;
  float: right;
  margin-bottom: 8px;
  margin-top: 8px;
}

.navbar-toggler-icon {
  font-size: 16px;
}

.dropdown-menu {
  left: initial;
  right: 0;
}

// button raised definition
// this button uses gradient for the background
$btn-raised-color: rgb(51, 51, 51);
$btn-raised-background: #f8f8f8;
$btn-raised-border: rgb(204, 204, 204);
$enable-gradients: true;

.btn-raised {
  @include button-variant(
    $btn-raised-background,
    $btn-raised-border,
    $btn-raised-color
  )
}

/*
* Solves Bootstrap 4 issue
* https://github.com/twbs/bootstrap/issues/25654
*/
/* Styles in sm disposition and up */
@media (min-width: 576px) and (max-width: 767px) {
  /* Solves bs4 bug */
  .navbar-expand-md > .container,
  .navbar-expand-lg > .container,
  .navbar-expand-xl > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Styles in md disposition and up */
@media (min-width: 768px) and (max-width: 991px) {
  /* Solves bs4 bug */
  .navbar-expand-lg > .container,
  .navbar-expand-xl > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Styles in lg disposition and up */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Solves bs4 bug */
  .navbar-expand-xl > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

// Alerts
// -------------------------

.alert {
  margin-top: 20px;
}

// Thumbnails
// -------------------------

.thumbnail {
  padding: 0;
  border-radius: 0;
  box-shadow: 0 0 5px #ccc, inset 0 0 0 #000;
}

// Font Icons
// -------------------------

.fa {
  margin-right: 6px;
}

.fab {
  margin-right: 6px;
}

.fas {
  margin-right: 6px;
}

.far {
  margin-right: 6px;
}

// Basic Snapchat Button CSS
.btn-snapchat {
  background-color: #fffc00;
  color: #000 !important;

  &:hover, &:active {
    background-color: #f1ef00;
  }
}

// Basic Twitch Button CSS
.btn-twitch {
  background-color: #6441a5;
  color: #FFF !important;

  &:hover, &:active {
    background-color: #503484;
  }
}
